<template>
  <el-menu
      :default-active="$route.path"
      background-color="#545c64"
      text-color="#fff"
      router
      unique-opened
      active-text-color="#ffd04b">

    <component v-for="menu in menuList" :key="menu.path" :index="menu.path"
               :is="menu.children && menu.children.length > 0 ? 'el-submenu' : 'el-menu-item'">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{menu.title}}</span>
      </template>

      <template v-if="menu.children && menu.children.length > 0">
        <el-menu-item v-for="menuItem in menu.children" :key="menuItem.path" :index="menuItem.path">
          <i :class="menuItem.icon"></i>
          <span slot="title">{{menuItem.title}}</span>
        </el-menu-item>
      </template>

    </component>

  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      menuList: [
        {
          title: '主页',
          icon: 'el-icon-s-home',
          path: '/index',
        },
        {
          title: '系统管理',
          icon: 'el-icon-s-tools',
          path: '/sys',
          children: [
            {
              title: '用户管理',
              icon: 'el-icon-user-solid',
              path: '/sys/user',
            },
            {
              title: '收藏管理',
              icon: 'el-icon-star-on',
              path: '/sys/file',
            },
            {
              title: '菜单管理',
              icon: 'el-icon-menu',
              path: '/sys/menu',
            }
          ]
        },
        {
          title: '课程管理',
          icon: 'el-icon-s-opportunity',
          path: '/course',
          children: [
            {
              title: '地理课程',
              icon: 'el-icon-d-caret',
              path: '/course/geography',
            },
            {
              title: '生物课程',
              icon: 'el-icon-s-help',
              path: '/course/biology',
            },
            {
              title: '化学课程',
              icon: 'el-icon-share',
              path: '/course/chemistry',
            }
          ]
        },
        {
          title: '回收管理',
          icon: 'el-icon-delete-solid',
          path: '/bush',
        },
        {
          title: '地图管理',
          icon: 'el-icon-camera-solid',
          path: '/map',
        },
        {
          title: '文章管理',
          icon: 'el-icon-s-data',
          path: '/article',
        }
      ]
    }
  }
}
</script>

<style scoped>
.el-menu {
  height: 100vh;
  border-right: none;
}
</style>